<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <a-button class="mr20" type="primary" @click="addAdmin">
                            <icon-plus class="mr6" />{{ $t('basics.add') }}
                        </a-button>
                        <a-button
                            class="mr20"
                            type="primary"
                            status="danger"
                            @click="deleteAcc(0)"
                        >
                            <icon-delete class="mr6" />{{ $t('basics.delete') }}
                        </a-button>
                        <a-button type="primary" @click="updataAcc">
                            {{ $t('basics.daoru') }}
                        </a-button>
                    </div>
                    <div>
                        <span class="s1">{{
                            $t('basics.quickReplyType')
                        }}</span>
                        <a-select
                            style="width: 110px"
                            v-model="form.reply_type"
                            :options="selectList"
                            class="w-full"
                        >
                        </a-select>
                    </div>
                    <div>
                        <a-button type="primary" @click="getList">
                            <template #icon><icon-search /></template>
                            {{ $t('basics.search') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content mt20">
                <a-table
                    :columns="columns"
                    :data="tableList"
                    :row-selection="rowSelection"
                    v-model:selectedKeys="selectedKeys"
                    row-key="id"
                    :pagination="false"
                >
                    <template #num_of_reply="{ record }">
                        <span>{{ computerNum(record) }}</span>
                    </template>
                </a-table>
                <div class="_crud-footer mt-3 text-right" ref="crudFooterRef">
                    <a-pagination
                        :total="pageList.total"
                        show-total
                        show-jumper
                        show-page-size
                        @page-size-change="getList"
                        @change="getList"
                        v-model:current="form.page"
                        v-model:page-size="form.pageSize"
                        style="display: inline-flex"
                        :page-size-options="[10, 20, 50, 100]"
                        :default-page-size="100"
                    />
                </div>
            </div>
            <a-modal
                :render-to-body="false"
                v-model:visible="visibleAdmin"
                :footer="false"
                :width="600"
            >
                <template #title>
                    {{ $t('basics.quickReply') }}
                </template>
                <a-col :span="20" class="flex items-center pb-[20px]">
                    <a-form-item
                        field="status"
                        class="m-[0px]"
                        :label="$t('basics.quickReplyType')"
                        label-col-flex="90px"
                    >
                        <a-select
                            v-model="adminForm.reply_type"
                            style="width: 120px"
                            :options="selectList"
                        >
                        </a-select>
                    </a-form-item>
                </a-col>

                <a-form
                    :model="adminForm"
                    ref="adminFormRef"
                    :labelCol="{ span: 0 }"
                    :rules="adminRules"
                >
                    <a-form-item
                        field="reply_content"
                        label-col-flex="90px"
                        :label="null"
                        :required="false"
                        validate-trigger="blur"
                    >
                        <template #label>
                            {{ $t('basics.quickReply') }}
                        </template>
                        <div style="width: 100%; position: relative">
                            <div v-if="showEmojiList" class="emoji-list">
                                <span
                                    style="
                                        display: inline-block;
                                        width: 20px;
                                        height: 20px;
                                        cursor: pointer;
                                    "
                                    v-for="emoji in faceList"
                                    :key="emoji"
                                    @click="addEmoji(emoji)"
                                    >{{ emoji }}</span
                                >
                            </div>
                            <img
                                style="
                                    width: 20px;
                                    height: 20px;
                                    cursor: pointer;
                                    position: absolute;
                                    right: 10px;
                                    bottom: 36px;
                                    z-index: 9999;
                                "
                                src="@/assets/images/表情.png"
                                alt=""
                                @click="toggleEmojiList"
                            />
                            <a-textarea
                                v-model="adminForm.reply_content"
                                cols="80"
                                :max-length="360"
                                rows="9"
                                :placeholder="$t('basics.zuiduoshuru')"
                                show-word-limit
                            />
                        </div>
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button
                        class="mr20"
                        style="color: #000"
                        @click="visibleAdmin = !visibleAdmin"
                        >{{ $t('basics.concel') }}</a-button
                    >
                    <a-button
                        type="primary"
                        @click="handleOkAdmin"
                        style="background: #2c6dff"
                        >{{ $t('basics.sure') }}</a-button
                    >
                </div>
            </a-modal>
            <ma-import
                :render-to-body="false"
                ref="crudImportRef"
                :upLoadData="importFile"
                @success="refresh"
                :isShowLoad="true"
                :isShowType="true"
                :downLoadData="downFile"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import {
    getQuickReplyList,
    addQuickReply,
    deleteQuickReply
} from '@/api/america/quickReply.js';
import { getProjectId } from '@/api/cloud/userProject.js';
import MaImport from '@/components/import/index.vue';
import appData from '@/assets/images/emojis.json';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const rowSelection = ref({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
});
const selectList = ref([
    {
        value: 1,
        label: t('basics.FirstSentenceReply')
    },
    {
        value: 2,
        label: t('basics.SecondSentenceReply')
    },

    {
        value: 0,
        label: t('basics.BeCommon')
    }
]);
const adminForm = ref({
    reply_type: 0
});
const visibleAdmin = ref(false);
const selectedKeys = ref([]);
const showEmojiList = ref(false);
const faceList = ref([]);
const loading = ref(false);
const computerNum = (record) => {
    if (record.num_of_success) {
        let total =
            (record.num_of_reply_conversion / record.num_of_success).toFixed(
                4
            ) * 100;
        if (total > 100) {
            return 100 + '%';
        } else {
            return total.toFixed(4) * 100;
        }
    } else {
        return 0;
    }
};
const adminRules = ref({
    reply_content: [
        {
            required: true,
            message: t('basics.kuaijiebitian')
        }
    ]
});
const columns = [
    {
        title: t('basics.xixiaoleirong'),
        dataIndex: 'reply_content',
        minWidth: 300,
        slotName: 'reply_content',
        align: 'center',
        ellipsis: true,
        tooltip: true
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        align: 'center',
        minWidth: 200
    }
];
const form = ref({
    page: 1,
    pageSize: 100,
    reply_type: 0
});
const tableList = ref([]);
const pageList = ref({
    total: 0
});
// 获取美国项目id
const getId = () => {
    getProjectId({ project_key: 'america' }).then((res) => {
        form.value.project_id = res.data.id;
        getList();
    });
};

// 获取列表数据
const getList = () => {
    loading.value = true;
    getQuickReplyList(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};
const loadEmojis = () => {
    faceList.value = appData;
};

const toggleEmojiList = () => {
    showEmojiList.value = !showEmojiList.value;
};
const addEmoji = (emoji) => {
    adminForm.value.reply_content += emoji;
    showEmojiList.value = false;
};
const addAdmin = () => {
    showEmojiList.value = false;
    resetAdmin();
    adminForm.value.project_id = form.value.project_id;
    visibleAdmin.value = true;
};

const resetAdmin = () => {
    adminForm.value.reply_content = '';
};

// 上传项目操作
const crudImportRef = ref('');
const updataAcc = () => {
    crudImportRef.value.open();
    importFile.value.params.project_id = form.value.project_id;
};
const importFile = ref({
    url: 'client/quickReply/import',
    params: {}
});
const downFile = ref({
    url: 'client/quickReply/download'
});
//   导入成功后
const refresh = () => {
    getList();
};
// 删除
const deleteAcc = (id) => {
    if (!selectedKeys.value.length) {
        proxy.$message.error(t('basics.deleteTips'));
        return;
    }
    const projectId = form.value.project_id;
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.deleteContent'),
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            if (id) {
                deleteQuickReply({ ids: [id], project_id: projectId }).then(
                    (res) => {
                        if (res.code == 200) {
                            proxy.$message.success(t('basics.controlsSecc'));
                            getList();
                        }
                    }
                );
            } else {
                console.log(selectedKeys.value);
                deleteQuickReply({
                    ids: selectedKeys.value,
                    project_id: projectId
                }).then((res) => {
                    if (res.code == 200) {
                        selectedKeys.value = [];
                        proxy.$message.success(t('basics.controlsSecc'));
                        getList();
                    }
                });
            }
        }
    });
};
const handleOkAdmin = () => {
    proxy.$refs['adminFormRef'].validate((valid) => {
        if (!valid) {
            addQuickReply(adminForm.value)
                .then((res) => {
                    if (res.code == 200) {
                        visibleAdmin.value = false;
                        proxy.$message.success(t('basics.controlsSecc'));
                        getList();
                    } else {
                        visibleAdmin.value = false;
                        proxy.$message.error(res.message);
                    }
                })
                .catch((error) => {});
        }
    });
};
getId();
loadEmojis();
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
.arco-textarea-wrapper {
    height: 300px;
    word-break: break-all;
}

.emoji-list {
    position: absolute;
    right: 7px;
    bottom: 30px;
    z-index: 9999;
    padding: 10px;
    width: calc(100% - 14px);
    border-radius: 10px;
}
// .container-content-table {
//     border-radius: 10px;
// }
// :deep(.arco-btn-size-medium) {
//     height: 30px;
// }
// :deep(.arco-btn) {
//     width: 70px;
// }
// :deep(.arco-modal) {
//     background: rgba(47, 55, 68, 0.8);
//     box-shadow: 0px 0px 10px 4px rgba(191, 212, 255, 0.25);
//     border-radius: 20px 20px 20px 20px;
// }
// .app-container {
//     background-color: white;
//     .container-head {
//         padding: 20px;
//         .formButton {
//             display: flex;
//             justify-content: center;
//             align-items: center;
//         }
//     }
//     .container-content {
//         .container-content-button {
//             margin-bottom: 20px;
//             .arco-btn {
//                 margin-right: 20px;
//                 font-size: 12px;
//             }
//         }
//     }
// }
// :deep(.arco-pagination-item:hover) {
//     background: #333c4a;
// }
// :deep(.arco-pagination-item-active) {
//     background: #333c4a;
// }
// .dialog-foot {
//     text-align: end;
// }
// :deep(.arco-pagination-total) {
//     color: #fff;
// }

// :deep(.arco-pagination-jumper-text-goto, .arco-pagination-jumper-prepend) {
//     color: #fff;
// }
// ::v-deep .arco-select-view-single {
//     width: auto;
//     background: #333c4a;
//     color: #fff;
// }
// :deep(.arco-input-wrapper) {
//     background: #333c4a;
//     color: #fff;
// }
// .emoji-list {
//     position: absolute;
//     left: 80px;
//     top: 80px;
//     background-color: white;
//     border: 1px solid #ddd;
//     padding: 10px;
//     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
//     z-index: 1000;
// }

// .emoji-list span {
//     cursor: pointer;
//     font-size: 20px;
//     margin: 5px;
// }
// :deep(.arco-form-item-label) {
//     text-align: center;
//     width: 100px;
//     font-weight: 600;
//     color: #000000;
// }

// ::v-deep .arco-table-th {
//     background: #2a3448;
//     color: #fff;
//     border: none;
// }
// ::v-deep .arco-table-border .arco-table-tr .arco-table-th {
//     border: none;
// }
// ::v-deep .arco-table-td {
//     background: #272c38;
//     color: #fff;
//     border-bottom: none;
// }

// ::v-deep
//     .arco-table-hover:not(.arco-table-dragging)
//     .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
//     .arco-table-td:not(.arco-table-col-fixed-left):not(
//         .arco-table-col-fixed-right
//     ),
// .arco-table-hover
//     .arco-table-tr-drag
//     .arco-table-td:not(.arco-table-col-fixed-left):not(
//         .arco-table-col-fixed-right
//     ) {
//     background: #2a3448;
// }

// ::v-deep .arco-table-border .arco-table-container {
//     border: none;
//     // padding: 28px 19px 0;
//     border-radius: 20px;
//     background: #272d39;
// }
// ::v-deep .arco-btn-primary.arco-btn-status-danger.arco-btn-disabled {
//     background: #333c4a;
// }
// ::v-deep .arco-btn-primary.arco-btn-status-danger {
//     background: #333c4a;
// }
// ::v-deep .arco-btn-primary,
// .arco-btn-primary[type='button'],
// .arco-btn-primary[type='submit'] {
//     background: #333c4a;
// }
// ::v-deep .arco-select-view-single {
//     background: #333c4a;
//     border-radius: 6px;
//     color: #fff;
// }
// ::v-deep .arco-scrollbar {
//     border-radius: 20px !important;
//     background: #353f4f !important;
// }
// ::v-deep .arco-select-dropdown {
//     border-radius: 20px;
//     background-color: #353f4f;
// }
// ::v-deep .selecte {
//     background: #353f4f !important;
//     border-radius: 20px !important;
// }
// deep(.arco-select-dropdown) {
//     padding: 10px 0;
// }
// //
// ::v-deep .arco-select-dropdown .arco-select-option-selected {
//     background: #353f4f !important;
// }
// ::v-deep .arco-pagination-total {
//     color: #fff;
// }

// ::v-deep .arco-select-dropdown {
//     background-color: #353f4f;
//     border-radius: 16px;
// }

// ::v-deep .arco-table-th {
//     padding: 5px 0;
// }

// ::v-deep .arco-form-item-label {
//     color: #fff;
// }

// ::v-deep .arco-select-dropdown {
//     background-color: rgba(86, 90, 100, 0.8);
//     border-radius: 16px;
//     border: none;
//     padding: 5px 10px;
// }
// ::v-deep .arco-select-dropdown .arco-select-option {
//     background-color: rgba(86, 90, 100, 0);
//     color: #fff;
// }
// ::v-deep .arco-select-dropdown .arco-select-option-active,
// .arco-select-dropdown
//     .arco-select-option:not(
//         .arco-select-dropdown .arco-select-option-disabled
//     ):hover {
//     background-color: rgba(86, 90, 100, 0);
//     color: #fff;
// }
// .hide-label .ant-form-item-label {
//     display: none;
// }
</style>
